<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1U3N</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        .panel {
            width: 32%;
            height: auto;
            position: absolute;
            background-color: rgba(180, 180, 180, 0.6);
            opacity: 0.9;
            padding: 15px;
            z-index: 5;
            top: 10%;
            left: 20px;
        }
        #panel1 {
            display: block;
        }
        #panel2 {
            display: none;
        }
        #animation_title {
            font-size: 30px;
            text-align: center;
            font-weight: bolder;
        }
        #animation_detail {
            font-size: 20px;
            text-align: left;
        }
        .button {
            background-color: #eeeeee;
            border: 1px solid black;
            color: black;
            padding: 2px 2px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
            margin: 2px;
            width: 5em;
        }
        .text {
            font-size: 12px;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
        }
    </style>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.noworker.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handjs/1.3.11/hand.min.js"></script> -->
    <script src="babylon.js"></script>
    <script src="babylon.gui.min.js"></script>
    <script src="hand.js"></script>
</head>

<body>
    <div id="rootDiv">
        <div class="panel" id="panel1">
            <label>View</label>
            <a class="button" href="#" onclick="toggle_fullscreen()">FullScreen</a>
            <br>
            <!-- <a class="button" name="toggle_rotation" href="#toggle_rotation" onclick="toggle_rotation()">Rotate</a> -->
            <a class="button" name="show_rack" href="#show_rack" onclick="show_rack()">Rack</a>
            <a class="button" name="show_tray" href="#show_tray" onclick="show_tray()">Tray</a>
            <a class="button" name="show_node" href="#show_node" onclick="show_node()">Node</a>
            <a class="button" name="show_rmc" href="#show_rmc" onclick="show_rmc()">RMC</a>
            <a class="button" name="show_psu" href="#show_psu" onclick="show_psu()">PSU</a>
            <a class="button" name="show_fanTray" href="#show_fanTray" onclick="show_fanTray()">Fan Tray</a>
            <a class="button" name="show_fan" href="#show_fan" onclick="show_fan()">Fan</a>
            <a class="button" name="show_rbp" href="#show_rbp" onclick="show_rbp()">RBP</a>
            <hr>
            <label>Animation</label>
            <br>
            <a class="button" name="begin_sop_plug_tray" href="#begin_sop_plug_tray" onclick="begin_sop_plug_tray()">Tray</a>
            <a class="button" name="begin_sop_plug_node" href="#begin_sop_plug_node" onclick="begin_sop_plug_node()">Node</a>
            <a class="button" name="begin_sop_replace_cpu" href="#begin_sop_replace_cpu" onclick="begin_sop_replace_cpu()">CPU</a>
            <a class="button" name="begin_sop_replace_dimm" href="#begin_sop_replace_dimm" onclick="begin_sop_replace_dimm()">DIMM</a>
            <a class="button" name="begin_sop_replace_rmc" href="#begin_sop_replace_rmc" onclick="begin_sop_replace_rmc()">RMC</a>
            <a class="button" name="begin_sop_replace_psu" href="#begin_sop_replace_psu" onclick="begin_sop_replace_psu()">PSU</a>
            <a class="button" name="begin_sop_plug_fantray" href="#begin_sop_plug_fantray" onclick="begin_sop_plug_fantray()">Fan Tray</a>
            <a class="button" name="begin_sop_plug_fan" href="#begin_sop_plug_fan" onclick="begin_sop_plug_fan()">Fan</a>
            <a class="button" name="begin_sop_replace_rbp" href="#begin_sop_replace_rbp" onclick="begin_sop_replace_rbp()">RBP</a>
            <a class="button" name="begin_air_flow" href="#begin_air_flow" onclick="begin_air_flow()">Air Flow</a>
            <hr>
            <label>Camera</label>
            <br>
            <a class="button" href="#" onclick="set_camera_target('down')">Down</a>
            <a class="button" href="#" onclick="set_camera_target('up')">Up</a>
            <a class="button" href="#" onclick="camera_down_to_floor()">Squat</a>
            <hr>
            <label>Presentation</label>
            <br>
            <div class="text">
                Press Shift-P to start presentation mode. Press Shift-P again to exit presentation mode.
            </div>
        </div>
        <div class="panel" id="panel2">
            <div id="animation_title"></div>
            <div id="animation_detail"></div>
        </div>
        <div class="canvas">
            <canvas id="renderCanvas"></canvas>
        </div>
    </div>
</body>

<!-- <script src="node3_chassis_tray_mlb_cpu_dimm.js"></script> -->
<script src="node3_chassis_tray_mlb_cpu_dimm-x3.js"></script>
<!-- <script src="node3_chassis_tray_mlb_cpu_dimm_x3_2.js"></script> -->
<script src="rack.js"></script>
<script src="dummy.js"></script>
<script src="fan.js"></script>
<script src="power.js"></script>
<script src="scene.js"></script>

</html>